<template>
  <div id="wxCode" class="wxcode"></div>
</template>

<script setup lang="ts">
import { ref, reactive } from "vue";
// 导入api
import { getLoginParam } from "@api/login";
// 1.创建 script 标签
const scDom = document.createElement("script");
// 2. 引入js文件
scDom.src = "http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js";
// 3.把标签script添加到body中
document.body.appendChild(scDom);
scDom.onload = async () => {
  const res = await getLoginParam();
  if (res.code != 0) return;
  const { appid, redirectUri, scope, state } = res.data;

  new WxLogin({
    id: "wxCode",
    appid,
    scope,
    redirect_uri: decodeURIComponent(redirectUri),
    state,
    href: "data:text/css;base64,LmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O30KLmltcG93ZXJCb3ggLnRpdGxlIHtkaXNwbGF5OiBub25lO30KLmltcG93ZXJCb3ggLmluZm8ge2Rpc3BsYXk6IG5vbmV9Ci5zdGF0dXNfaWNvbiB7ZGlzcGxheTogbm9uZX0KLmltcG93ZXJCb3ggLnN0YXR1cyB7dGV4dC1hbGlnbjogY2VudGVyO30KLmltcG93ZXJCb3ggLnFyY29kZSB7d2lkdGg6IDIwMHB4O21hcmdpbi10b3A6IDtib3JkZXI6IG5vbmU7fQ==",
  });
};
</script>

<style lang="scss" scoped>
.wxcode {
  overflow: hidden;
  display: flex;
  justify-content: center;
}
</style>
